<template>
  <div class="security-person-left">
    <group-title/>
    <div class="security-person-l1">
      <category-title title="个人简介" title-sub="PERSONAL INFORMATION"/>
      <div class="person-info-box">
        <person-info :data="student"/>
      </div>
    </div>
    <div class="security-person-l2">
      <category-title title="个人事件统计" title-sub="Personal event statistics"/>
      <div class="person-stat-box">
        <person-stat :data="student"/>
      </div>
    </div>
    <div class="security-person-l3">
      <category-title title="学籍档案" title-sub="Student status file"/>
      <div class="person-document-box">
        <person-document :data="student"/>
      </div>
    </div>
  </div>
  <div class="security-document-right">
    <div class="search-box">
      <search-bar ref="searchRef" date @dateChange="dateChange" :loading="searchLoading" :style="{ zIndex: 3 }"
                  placeholder="搜索更多人员信息" @search="onSearch"
      />
      <div v-if="searchList" class="searchList">
        <div v-for="(item,index) in searchList" :key="item.id" class="item"
             @click="searchStudent(item.XH)"
        >{{ item.XM }}/{{ item.BJMC }}
        </div>
      </div>
    </div>
    <div class="person-warning-box">
      <div v-for="(item, index) in [warningList.wg, warningList.tt, warningList.sl, warningList.sw]" :key="index"
           :class="`warning-info-p${index + 1}`"
      >
        <category-title :style="{ visibility: index ? 'hidden' : 'visible' }" title="告警信息"
                        title-sub="Alarm information"
        />
        <div class="warning-info-box">
          <warning-info :datas="item" :title="['晚归告警', '天台逗留告警', '失联告警', '上网告警'][index]"
                        @change="warnClick"
          />
        </div>
      </div>
      <div id="iframe-content" class="iframe-content"/>
      <div class="routes">
        <div class="title">
          轨迹画面捕捉
        </div>
        <div class="image-info-box">
          <image-info-list :datas="smartObject.list" type="route2" @preview="onPreviewImage"/>
        </div>
      </div>
    </div>
    <preview v-if="showPreview" :url="previewUrl" @close="showPreview = false"/>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";

import GroupTitle from "@/components/customs/group-title/index.vue";
import CategoryTitle from "@/components/customs/category-title/index.vue";
import SearchBar from "@/components/customs/search-bar/index.vue";
import PersonInfo from "./components/person-info/index.vue";
import PersonStat from "./components/person-stat/index.vue";
import PersonDocument from "./components/person-document/index.vue";
import WarningInfo from "./components/warning-info/index.vue";
import ImageInfoList from "@/components/customs/image-info-list/index.vue";
import Preview from "@/components/customs/preview/index.vue";
import {inject} from "@vue/runtime-core";
import {DocumentStudent, SecurityL3} from "@/common/customs/security";
import {reactive} from "@vue/reactivity";
import dayjs from "dayjs";

const onPageChange = inject("pageChange");
const showPreview = ref(false);
const previewUrl = ref("");
const searchRef = ref();
const student = ref({});
const searchLoading = ref(false);
const searchList = ref([]);
const smartObject = inject("smartObject");
const resetMap = inject("resetMap");
const warningList = reactive({
  wg: [],
  tt: [],
  sl: [],
  sw: [],
});
const onPreviewImage = (item) => {
  previewUrl.value = item.image;
  showPreview.value = true;
};
const warnClick = () => {
  onPageChange(21);
  smartObject.gjxh = smartObject.xh;
};
const resizeIFrame = () => {
  const iframeOrigin = document.getElementById("iframe-origin");
  const box = document.getElementById("iframe-content");
  const {top, left, width, height} = box.getBoundingClientRect();
  iframeOrigin.style.top = `${top}px`;
  iframeOrigin.style.left = `${left}px`;
  iframeOrigin.style.zIndex = 2;
  iframeOrigin.style.width = `${width}px`;
  iframeOrigin.style.height = `${height}px`;
};

const recoverIFrame = () => {
  const iframeOrigin = document.getElementById("iframe-origin");
  iframeOrigin.style.top = "0px";
  iframeOrigin.style.left = "0px";
  iframeOrigin.style.zIndex = 0;
  iframeOrigin.style.width = "100%";
  iframeOrigin.style.height = "100%";
};

const getStudent = async () => {
  const api = new DocumentStudent();
  const params = {
    page: 1,
    page_size: 1,
  };
  if (smartObject.isXh) {
    params.XH = smartObject.xh;
  } else {
    params.XH = smartObject.xh;
  }
  smartObject.isXh = false;
  api.params(params);

  await api.send();
  const {data} = await api.getDatas();
  student.value = data.data[0];
};

const editWarning = (datas) => {
  let index = 4 - datas.length;
  for (let i = 0; i < index; i++) {
    datas.push({
      is_type: 3,
      name: "-- --",
      sj: "-- --",
    });
  }
  return datas;
};

const getWarning = async () => {
  let params = {
    page: 1,
    page_size: 4,
    XH: smartObject.xh,
    type: 1
  };
  const api = new SecurityL3();
  api.params(params);
  await api.send();
  const {data: tt} = await api.getDatas();
  warningList.tt = editWarning(tt.data);
  params.type = 2;
  await api.send();
  const {data: wg} = await api.getDatas();
  warningList.wg = editWarning(wg.data);
  params.type = 3;
  await api.send();
  const {data: sw} = await api.getDatas();
  warningList.sw = editWarning(sw.data);
  params.type = 4;
  await api.send();
  const {data: sl} = await api.getDatas();
  warningList.sl = editWarning(sl.data);
};

const onSearch = async text => {
  if (searchLoading.value) {
    return;
  }
  searchLoading.value = true;
  try {
    const api = new DocumentStudent();
    api.params({
      page: 1,
      page_size: 40,
      name: text
    });
    await api.send();
    const {data} = await api.getDatas();
    searchList.value = data.data;
    searchLoading.value = false;
  } catch (e) {
    searchLoading.value = false;
    console.log(e);
  }

};

const searchStudent = (xh) => {
  smartObject.xh = xh;
  // smartObject.sj = "";
  searchList.value = [];
  student.value = {};
  for (const warningListKey in warningList) {
    warningList[warningListKey] = [];
  }
  getStudent();
  getWarning();
  resetMap.closeMap();
};

const dateChange = (date) => {
  smartObject.sj = date ? date.format("YYYY-MM-DD") : ""
  resetMap.closeMap();

};
onMounted(() => {
  if (smartObject.xh) {
    searchRef.value.dateValue= smartObject.sj?dayjs(smartObject.sj):''
    getStudent();
    getWarning();
  }
  resizeIFrame();
});

onUnmounted(() => {
  // smartObject.sj = "";
  recoverIFrame();
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
